<template>
	<view class="bods">
		<view class="serch">
			<view style="width: 80%;margin-left: 30rpx;">
				<u-search :showAction='false' placeholder="出差事由" v-model="keyvalue" :clearabled="true"></u-search>
			</view>
			<view class="textblue" @click="getDataList">
				<p>搜索</p>
				<!-- <image style="width: 25rpx;" src="@/static/newimg/paixu.png" mode="widthFix"></image> -->
			</view>
			<!-- <view class="textblue">
				<p>时间</p>
				<image style="width: 25rpx;" src="@/static/newimg/paixu.png" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- 列表 -->
		<view class="rowf" v-for="(item, index) in tableList" :key="index">
			<view class="rowf_l">
				<image src="../../static/oa/danju.png" mode="widthFix" style="width: 70rpx;vertical-align: bottom;"></image>
				<p class='rowf_txt'><b>{{ item.busiTripNo }}</b></p>
			</view>
			<view class="config">
				<view class="Hawork">
					<view class="Hawork_god">
						<span class='sright1'>开始时间</span>
						<span style="margin-left: 20rpx;">{{ item.startDate }}</span>
					</view>
					<view class="Hawork_god">
						<span class='sright1'>结束时间</span>
						<span style="margin-left: 20rpx;">{{item.endDate}}</span>
					</view>
					<view class="Hawork_god">
						<span class='sright1'>出差事由</span>
						<span style="margin-left: 20rpx;">{{ item.tripReasion }}</span>
					</view>


				</view>

			</view>
			<u-line></u-line>
			<view @click="toInfor(item.busiTripNo)" class="unik">
				<p class='texttwo'>变更行程</p>
			</view>
		</view>
		<view style="height: 20px;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyvalue: '',
				tableList: [],
			}
		},
		created() {
			this.keyvalue= "";
			this.getDataList();
		},
		methods: {
			toInfor(billNo) {
				var url = __webpath + "/workflow/businessMP/workflowform?appId=" + this.$route.query.appId+ "&billNo="+ billNo;
				FUI.Window.ngto(url);
			},
			getDataList() {
				let _this= this;
				_this.$lyRequest.get("/gateway/reim/mp/dbsap/busiTripmEntity/queryBusiTripList.do", {
					empNo: uni.getStorageSync('FRAMEWORK_USERINFO_KEY').userid,
					tripReasion: _this.keyvalue
				}).then(result=>{
				  if(result.data && result.data.result == 1){
				    _this.tableList= result.data.rows.records;
				  }else{
					_this.$api.showTip(result.data.msg);
				  }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	view{
		font-family: pf;
	}
	.bods {
		width: 100%;
		background-color: rgb(248, 249, 251);
		height: 750px;

	}

	.textblue {
		width: 120rpx;
		height: 60rpx;
		background-color: red;
		text-align: center;
		font-size: 30rpx;
		border-radius: 50px;
		background-color: rgb(247, 247, 247);
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto 20rpx;
	}

	.serch {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 5rpx;
		border-top: 2rpx solid rgb(248, 249, 251);
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.rowf {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: white;
		padding-top: 20rpx;
		margin: 16rpx 0;

		.rowf_l {
			width: 90%;
			display: flex;
			flex-direction: row;
			flex: 1;
			margin: 0 auto
		}

		.rowf_txt {
			font-size: 30rpx;
			line-height: 75rpx;
			flex: 5;
			padding-left: 30rpx;
		}
	}

	.unik {
		display: flex;
		flex-direction: row-reverse;
		margin: 2rpx 0;
		padding-right: 30rpx;
	}

	.bwork ul li {
		margin: 20rpx 0;
		padding: 10rpx;
		background-color: white;
		border-radius: 8px;
	}

	.sright1 {
		color: #999999;
	}

	.texttwo {
		margin-top: 10rpx;
		width: 130rpx;
		height: 32rpx;
		padding: 6rpx 10rpx;
		text-align: center;
		line-height: 32rpx;
		font-size: 26rpx;
		border-radius: 100rpx;
		background-color: white;
		border: 1px solid rgb(255, 161, 8);
		color: rgb(255, 161, 8);
	}

	.Hawork {
		display: flex;
		flex-direction: column;
		position: relative;

		.Hawork_god {
			display: flex;
			flex-direction: row;
		}
	}

	.Hawork span {
		padding: 7rpx 5rpx;
		font-size: 26rpx;
		margin-left: 10%;
	}

	.bwork {
		background-color: rgb(248, 249, 251);
		padding: 12px;
		border-radius: 8px;
	}

	.bwork ui {
		width: 95%;
		margin: 0 auto;
	}
</style>
